<!--
 * @FileDescription 工具栏
 * @Author lz
 * @Date 20230224 18:19:38
 * @LastEditors lz
 * @LastEditTime 20230224 18:19:38
-->
<template>
  <div class="toolbar_wp" v-if="state.show">
    <img class="pic" src="/public/images/ic_menu_展开.png" @click="close()" />
    <div class="tit">工具栏</div>
    <!-- <img src="/structure/DecorativeLine_r.png" class="line" /> -->
    <!-- <img src="/structure/develop.png" class="develop" @click="show()" /> -->
    <!-- <div class="close" @click="close()">×</div> -->
    <div class="toolbar_content">
      <div class="toolbarName">
        {{ HomeContent.Default.ToolInformation.value.Name }}
      </div>
      <img
        :src="HomeContent.Default.Tool_Icon.value"
        class="strumento_ico"
        v-if="HomeContent.Default.ToolInformation.value.Icon"
      />
      <div class="ToggleBar" v-if="HomeContent.Default.ToolInformation.value.Setting">
        <!-- <img src="/structure/gjl_l_arr.png" class="togBtn" @click="sub()" /> -->
        <!-- <img
          v-if="HomeContent.Default.ToolInformation.value.Value > 0"
          src="/public/images/减1.png"
          class="togBtn"
          @click="sub()"
        /> -->
        <img src="/public/images/减1.png" class="togBtn" @click="sub()" />
        <div class="numVal">
          <a-input-number
            id="inputNumber"
            v-model:value="HomeContent.Default.ToolInformation.value.Value"
            :min="HomeContent.Default.ToolInformation.value.Min"
            :max="HomeContent.Default.ToolInformation.value.Max"
            :step="HomeContent.Default.ToolInformation.value.increment"
          />
        </div>
        <!-- <img src="/structure/gjl_r_arr.png" class="togBtn" @click="add()" /> -->
        <img src="/public/images/加.png" class="togBtn" @click="add()" />
      </div>
    </div>
    <div
      class="retrieve"
      @click="retrieveBtn()"
      v-if="HomeContent.Default.ToolInformation.value.Icon"
    >
      <img src="/public/images/放回.png" class="retrieve_ico" />
    </div>
  </div>
  <div class="StowedState" v-if="!state.show" @click="show()">
    <img src="/public/images/ic_menu_收起.png" class="expArr" />
    <span style="color: black; font-size: 15px">工具栏</span>
  </div>
</template>

<script setup lang="ts">
import { ClientMessage } from "@runtime/generate/message/ClientMessage";
import WebSocketComponent from "@runtime/module/WebSocket/WebSocketComponent";
import { reactive, ref, watch } from "vue";
import HomeContent from "../HomeContent";
import MessageCode from "../MessageCode";
const state = reactive({
  show: true,
});
function show() {
  state.show = !state.show;
}
function close() {
  state.show = false;
}
function add() {
  if (
    HomeContent.Default.ToolInformation.value.Value <
    HomeContent.Default.ToolInformation.value.Max
  ) {
    // HomeContent.Default.ToolInformation.value.Value +=
    //   HomeContent.Default.ToolInformation.value.increment;
    HomeContent.Default.ToolInformation.value.Value++;
  }
}
function sub() {
  if (
    HomeContent.Default.ToolInformation.value.Value >
    HomeContent.Default.ToolInformation.value.Min
  ) {
    // HomeContent.Default.ToolInformation.value.Value -=
    //   HomeContent.Default.ToolInformation.value.increment;
    HomeContent.Default.ToolInformation.value.Value--;
  }
}
//放回
function retrieveBtn() {
  WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DisassemblyAdapterRequest(
      MessageCode.Default.MsgCodesList.TOOL_BAR_PUTBACK
    )
  );
}
//监听工具栏数值
watch(
  () => HomeContent.Default.ToolInformation.value.Value,
  (newVal, oldVal) => {
    if (newVal != oldVal) {
      WebSocketComponent.Default.PostMessageAsync(
        new ClientMessage.DisassemblyAdapterRequest(
          MessageCode.Default.MsgCodesList.TOOL_BAR_ARGUMENT,
          HomeContent.Default.ToolInformation.value.Value.toString()
        )
      );
    }
  }
);
</script>

<style scoped>
.toolbar_wp {
  position: absolute;
  top: 609px;
  right: 9px;
  width: 340px;
  height: 312px;
  background-color: #ffffff;
  border-radius: 10px;
}

.StowedState {
  position: absolute;
  right: 9px;
  top: 609px;
  width: 130px;
  height: 50px;
  background-color: #ffffff;
  text-align: center;
  line-height: 50px;
  border-radius: 10px;
}

.expArr {
  margin-top: -7px;
  margin-right: 10px;
}

.line {
  width: 272px;
  height: 28px;
  position: absolute;
  right: 8px;
  top: 32px;
}
.pic {
  position: absolute;
  top: 14px;
  left: 9px;
}
.tit {
  font-size: 15px;
  /* font-family: YouSheBiaoTiHei; */
  /* font-weight: 600; */
  color: black;
  position: absolute;
  top: 14px;
  left: 33px;
}
.close {
  color: black;
  font-size: 28px;
  display: inline-block;
  position: absolute;
  top: 22px;
  right: 38px;
}
.develop {
  position: absolute;
  left: 4px;
  top: 14px;
  width: 27px;
  height: 32px;
}

.toolbarName {
  font-size: 18px;
  font-weight: bold;
  color: black;
}

.toolbar_content {
  text-align: center;
  margin-top: 73px;
}

.ToggleBar {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 32px;
  left: 51%;
  transform: translate(-50%);
}

.togBtn {
  width: 30px;
  height: 30px;
}

.numVal {
  width: 96px;
  height: 49px;
  margin: 20px 0px;
  line-height: 49px;
  font-size: 16px;
  font-weight: 400;
  color: #b1d0f4;
}

:deep().ant-input-number {
  background: transparent;
  border: none;
  box-shadow: none;
}

:deep().ant-input-number-handler-wrap {
  display: none;
}

:deep().ant-input-number-input {
  text-align: center;
  color: black;
  font-size: 20px;
}

.strumento_ico {
  width: 160px;
  height: 160px;
  margin-top: 6px;
}
.retrieve {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: black;
  position: absolute;
  bottom: 59px;
  right: 36px;
}
.retrieve_ico {
  width: 35px;
  height: 35px;
  margin-top: -3px;
}
</style>
